import { useEffect } from 'react'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { Form } from 'react-router-dom'
import { Button, Input, Modal, Switch, Tooltip, message } from 'antd'
import classNames from 'classnames'
import { useSettingStore, useSnippetsStore } from '@renderer/stores'
import { useShortcutInputHandler, useShortcutKey } from '@renderer/hooks'
import { Error } from '@renderer/components/Error'
import { SETTING_STORAGE_NAME } from '@renderer/constants'
import styles from './style.module.css'

const QuickShortcutKeys = [
  'Control + Space',
  'Alt + Space',
]

export function Setting () {
  const shortcutKey = useSettingStore(s => s.shortcutKey)
  const managerShortcutKey = useSettingStore(s => s.managerShortcutKey)
  const openAtLogin = useSettingStore(s => s.openAtLogin)
  const searchShortcutError = useSnippetsStore(s => s.searchShortcutError)
  const managerShortcutError = useSnippetsStore(s => s.managerShortcutError)
  const setShortcutKey = useSettingStore(s => s.setShortcutKey)
  const setOpenAtLogin = useSettingStore(s => s.setOpenAtLogin)
  const setManagerShortcutKey = useSettingStore(s => s.setManagerShortcutKey)
  const { register } = useShortcutKey()
  const [handleSearchKeydown] = useShortcutInputHandler(setShortcutKey)
  const [handleManagerKeydown] = useShortcutInputHandler(setManagerShortcutKey)

  useEffect(() => {
    register('search', shortcutKey)
  }, [shortcutKey])

  useEffect(() => {
    register('manager', managerShortcutKey)
  }, [managerShortcutKey])

  // 获取并同步开机启动状态
  useEffect(() => {
    window.api.getOpenAtLogin().then((isOpenAtLogin) => {
      setOpenAtLogin(isOpenAtLogin)
    })
  }, [setOpenAtLogin])

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <Form className={styles.settingForm}>
          <div className={styles.formRowTitle}>搜索框</div>
          <div className={styles.formRow}>
            <div className={styles.formLabel}>呼出快捷键</div>
            <div className={styles.formContent}>
              <Input
                readOnly
                value={shortcutKey}
                className='bg-neutral-200 text-t-secondary'
                variant='borderless'
                onKeyDown={handleSearchKeydown}
              />
            </div>
          </div>
          <div className={styles.quickShortcutKey}>
            {
              QuickShortcutKeys.map(str => {
                const disabled = str === shortcutKey

                return (
                  <a
                    key={str}
                    className={classNames({
                      [styles.disabled]: disabled,
                    })}
                    onClick={() => {
                      if (disabled) return

                      setShortcutKey(str)
                    }}
                  >
                    {str}
                  </a>
                )
              })
            }
          </div>
          <Error message={searchShortcutError} />
          <div className={styles.formRowTitle}>管理界面</div>
          <div className={styles.formRow}>
            <div className={styles.formLabel}>呼出快捷键</div>
            <div className={styles.formContent}>
              <Input
                readOnly
                value={managerShortcutKey}
                className='bg-neutral-200 text-t-secondary'
                variant='borderless'
                onKeyDown={handleManagerKeydown}
              />
            </div>
          </div>
          <Error message={managerShortcutError} />
          <div className={styles.formRowTitle}>偏好设置</div>
          <div className={styles.formRow}>
            <div className={styles.formLabel}>开机启动</div>
            <div className={styles.formContent}>
              <Switch
                checked={openAtLogin}
                onChange={checked => {
                  setOpenAtLogin(checked)
                  window.api.openAtLogin(checked)
                }}
              />
            </div>
          </div>
          <div className={styles.formRowTitle}>缓存设置</div>
          <div className={styles.formRow}>
            <div className={styles.formLabel}>
              <Button
                type="primary"
                danger
                onClick={() => {
                  Modal.confirm({
                    title: '提示',
                    content: '确认清除缓存吗？',
                    onOk: () => {
                      localStorage.removeItem(SETTING_STORAGE_NAME)
                      message.success('缓存清除成功！')
                    },
                  })
                }}
              >
                清除缓存
              </Button>
            </div>
          </div>
          <div className={styles.formRow}>
            <div className={styles.formLabel}>
              <Button
                type="primary"
                onClick={() => {
                  window.api.reloadWindow('manager')
                  window.api.reloadWindow('search')
                }}
              >
                重载窗口
              </Button>
              <Tooltip
                title="例如新增书签后，需要重载窗口才能被搜索到"
              >
                <QuestionCircleOutlined className='ml-2 text-sm text-t-secondary' />
              </Tooltip>
            </div>
          </div>
        </Form>
      </div>
    </div>
  )
}
